<%-- 
    Document   : showPath
    Created on : 2019-12-26, 21:19:07
    Author     : dusin
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>轨迹</title>
        <link rel="stylesheet" href="../../js/jquery/themes/default/easyui.css" type="text/css" />
        <link rel="stylesheet" href="../../js/jquery/themes/icon.css" type="text/css" />
        <link rel="stylesheet" href="../../js/jquery/themes/color.css" type="text/css" />
        <link rel="stylesheet" href="../../css/demo.css" type="text/css" />
        <style type="text/css">
            body, html, #allmap {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                font-family: "微软雅黑";
            }

            #l-map {
                height: 100%;
                width: 78%;
                float: left;
                border-right: 2px solid #bcbcbc;
            }

            #r-result {
                height: 100%;
                width: 20%;
                float: left;
            }
        </style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=kaLBv8Axey6j0ZRMAHaYUhGAKVq4KG9K"></script>
        <script type="text/javascript">
            var lon = [];
            var lat = [];
            $(document).ready(function() {
                // 百度地图API功能
                var map = new BMap.Map("allmap");
                //中心点的坐标
                var point = new BMap.Point(116.404556, 39.915378);
                map.centerAndZoom(point, 13);
                //允许滚动缩放
                map.enableScrollWheelZoom(true);
                //添加地图控件
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
                map.addControl(new BMap.OverviewMapControl());
                map.addControl(new BMap.MapTypeControl());

                // 编写自定义函数,创建标注
                function addMarker(point) {
                    var marker = new BMap.Marker(point);
                    map.addOverlay(marker);
                }
                var rid = '<%=request.getParameter("rid")%>';
                $.post("../../servlet/web/cargo/findLocation", {rid: rid},
                function(data, status) {
                    if (status == 'success') {
                        var i = 0;
                        while (i < data.rows.length) {
                            lat.push(data.rows[i].latitude);
                            lon.push(data.rows[i].longitude);
                            i++;
                        }
                        if(lat.length>0){
                            var startPoint = new BMap.Point(lon[0],lat[0]);
                            map.centerAndZoom(startPoint, 13);
                        }                        
                        for (var i = 0; i < lon.length; i++) {
                            var point = new BMap.Point(lon[i], lat[i]);
                            addMarker(point);
                        }
                    }
                }
                , "json");
            });

        </script>
    </head>
    <body>
        <div id="allmap"></div>        
    </body>

</html>
